<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
		</div>
		<!-- 
		 1.Vue中的数据代理:
			通过vm对象代理data对象中属性的操作(读/写)
		 2.Vue中数据代理的好处:
			更加方便的操作data中的数据
		 3.基本原理:
			通过0bject.defineProperty()把data对象中所有属性添加到vm上。
			为每一个添加到vm上的属性，都指定一个getter/setter.
			在getter/setter内部去操作(读/写)data中对应的属性。
		 -->
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。

		// const vm =  new Vue({
		// 	el: '#root',
		// 	data: {
		// 		name: '尚硅谷',
		// 		address: '银河SOHO'
		// 	}
		// })
		//为了方便同vm获取data,换一种写法
		let data = {
			name: '尚硅谷',
			address: '银河SOHO'
		}
		//vm.data = options.data=data
		//Vue里面定义的是个配置对象，这个配置对象叫options
		const vm = new Vue({
			el: '#root',
			data //传经来的data怎么表示呢，是options.data
			//options.data的值是哪一个？是传进来的data，就是外面定义的data。
		})
	</script>
</html>